import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Select, Button, DatePicker } from 'antd';
const { RangePicker } = DatePicker;
import MsgHisTable from '../../components/Msg/MsgHisTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import moment from 'moment';

import styles from './MsgHis.less';

const FormItem = Form.Item;
const { Option } = Select;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');

@connect(state => ({
  msg: state.msg,
}))
@Form.create()
export default class MsgHis extends PureComponent {
  state = {
    pageNo:1,
    pageSize:10,
    addInputValue: '',
    modalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
    msgAttachmentAddr:"",
    beginMsgTime:null,
    endMsgTime:null,
  };

  componentDidMount() {
    const pageNo = this.state.pageNo;
    const pageSize = this.state.pageSize;
    const msgAttachmentAddr = this.state.msgAttachmentAddr;
    const beginMsgTime = this.state.beginMsgTime;
    const endMsgTime = this.state.endMsgTime;
    this.handleInitSearch(pageNo,pageSize,msgAttachmentAddr,beginMsgTime,endMsgTime);
  }
  //把初始化查询的代码抽离出来
  handleInitSearch = (pageNo,pageSize,msgAttachmentAddr,beginMsgTime,endMsgTime) => {
    const { dispatch } = this.props;
    const params = {
      rsId:1,
      pageNo: pageNo,
      pageSize: pageSize,
      msgAttachmentAddr:msgAttachmentAddr,
      beginMsgTime:beginMsgTime,
      endMsgTime:endMsgTime,
    };
    dispatch({
      type: 'msg/listMsgHis',
      payload:params,
    });
  }

  //实现分页查询粉丝
  handleMsgHisTableChange = (pagination, filtersArg, sorter) => {
    const { msgAttachmentAddr,beginMsgTime,endMsgTime } = this.state;
    const pageNo = pagination.current;
    const pageSize = pagination.pageSize;
    this.setState({
      pageNo:pageNo
    });
    this.handleInitSearch(pageNo,pageSize,msgAttachmentAddr,beginMsgTime,endMsgTime);
  }

  //重置查询粉丝
  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    const pageNo = this.state.pageNo;
    const pageSize = this.state.pageSize;
    this.handleInitSearch(pageNo,pageSize,"",null,null);
  }

  handleSelectRows = (rows) => {
    this.setState({
      selectedRows: rows,
    });
  }
  //删除单个历史消息处理方式
  delMsgHis = (record,index) => {
    const { dispatch } = this.props;
    const params = {
      ids:record.id,
    };
    dispatch({
      type: 'msg/delMsg',
      payload:params,
    });
    const {pageNo,pageSize,msgAttachmentAddr,beginMsgTime,endMsgTime } = this.state;
    this.handleInitSearch(pageNo,pageSize,msgAttachmentAddr,beginMsgTime,endMsgTime);
  }
  //批量删除历史消息处理
  delMsgHiss = (ids) => {
    const { dispatch } = this.props;
    const params = {
      ids:ids,
    };
    dispatch({
      type: 'msg/delMsg',
      payload:params,
    });
    const {pageNo,pageSize,msgAttachmentAddr,beginMsgTime,endMsgTime } = this.state;
    this.handleInitSearch(pageNo,pageSize,msgAttachmentAddr,beginMsgTime,endMsgTime);
  }
  handleSearch = (e) => {
    const self = this;
    const pageNo = self.state.pageNo;
    const pageSize = self.state.pageSize;
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;

      var msgAttachmentAddr = fieldsValue.msgAttachmentAddr && fieldsValue.msgAttachmentAddr.valueOf();
      var beginMsgTime = fieldsValue.beginToEndMsgHisDate && moment(fieldsValue.beginToEndMsgHisDate[0].valueOf()).format('YYYY-MM-DD HH:mm:ss');
      var endMsgTime = fieldsValue.beginToEndMsgHisDate && moment(fieldsValue.beginToEndMsgHisDate[1].valueOf()).format('YYYY-MM-DD HH:mm:ss');
      if(msgAttachmentAddr == undefined){
        msgAttachmentAddr = "";
      }
      if(beginMsgTime == undefined){
        beginMsgTime = null;
      }
      if(endMsgTime == undefined){
        endMsgTime = null;
      }
      self.setState({
        msgAttachmentAddr:msgAttachmentAddr,
        beginMsgTime:beginMsgTime,
        endMsgTime:endMsgTime
      });
      this.handleInitSearch(pageNo,pageSize,msgAttachmentAddr,beginMsgTime,endMsgTime);

    });
  }

  renderForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="关键字">
              {getFieldDecorator('msgAttachmentAddr')(
                <Input placeholder="关键字" />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="时间范围">
              {getFieldDecorator('beginToEndMsgHisDate')(
                <RangePicker
                  showTime={{ format: 'HH:mm:ss' }}
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder={['开始时间', '结束时间']}
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const { msg: { loadingHis: loadingHis, msgHisData } } = this.props;
    const { selectedRows} = this.state;
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>
              {this.renderForm()}
            </div>
            <MsgHisTable
              selectedRows={selectedRows}
              loadingHis={loadingHis}
              msgHisData={msgHisData}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleMsgHisTableChange}
              delMsgHis={(record,index)=>this.delMsgHis(record,index)}
              delMsgHiss={(ids)=>this.delMsgHiss(ids)}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
